<template>
  <div class="container">
    <!-- 棋盘 -->
    <div class="camera">
      <div class="map" :style="`top:0px;left:0px`">
        <div
          v-for="(item, index) in mapList"
          :key="index"
          class="map-cube"
          @mouseover="showHover = item.land_id"
          @mouseout="showHover = null"
          :style="`top:${item.top}px;left:${item.left}px;width:${item.size}px;height:${item.size}px`"
          @click="item.pass"
        >
          <div class="cube-box">
            <div class="title">{{ item.land_name }}</div>
            <van-icon
              class="iconFont cube"
              class-prefix="icon"
              :class="item.land_image"
            />
          </div>
          <div
            v-show="showHover == item.land_id"
            :style="item.hoverStyle"
            class="map-hover"
          >
            <div>{{ item.land_name }}</div>
            <div>{{ item.land_type }}</div>
          </div>
        </div>
      </div>
      <div
        v-for="(item, index) in $store.getters.playerContral"
        :key="index"
        :style="getPlayerStyleByItem(item)"
        class="player"
      >
        {{ item.name[0] }}
      </div>
      <div class="center-box" :style="centerStyle()">
        <!-- <div class="center-item">当前玩家 {{ getInfo() }}</div> -->
        <div class="center-inner-box">
          <div
            class="center-item"
            v-for="(item, index) in historyInfo"
            :key="index"
          >
            {{ item.str }}
          </div>
        </div>
      </div>
    </div>
    <!-- 玩家面板 -->
    <div class="ui-box" :style="`left:${mapConfig.size + 80}px`">
      <div v-for="(item, index) in playerContral" :key="index">
        <div v-if="item.id == gameContral.player_id" class="player-box">
          <div class="avatar-box">
            <img
              class="avatar"
              :src="require(`../../assets/images/pic/${item.avatar}.jpeg`)"
            />
          </div>
          <div class="info-box">
            <div class="info-item">{{ item.name }}</div>
            <div class="info-item">金钱：{{ item.money }}</div>
            <div
              class="info-item hvbtn"
              @click="showcardByType(item, 'politics')"
            >
              政策
            </div>
            <div class="nb">
              <div
                @click="showcardByType(item, 'general')"
                class="info-item-item color_1"
              >
                武将
              </div>
              <div
                @click="showcardByType(item, 'land')"
                class="info-item-item color_2"
              >
                城池
              </div>
            </div>
            <div class="nb">
              <div
                @click="showcardByType(item, 'stratagem')"
                class="info-item-item color_3"
              >
                计谋
              </div>
              <div
                @click="showcardByType(item, 'command')"
                class="info-item-item color_4"
              >
                指挥
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="dice-box">
        <van-button
          @click="handlerMove"
          style="width: 200px; height: 60px; font-size: 24px"
          type="info"
          round
          plain
          >{{ value }}</van-button
        >
        <div class="step">
          <van-rate
            icon="play"
            void-icon="play-o"
            disabled
            disabled-color="red"
            color="red"
            void-color="blue"
            v-model="value"
            :size="60"
            :count="6"
          />
        </div>
      </div>
      <div class="operate">
        <button @click="testget">test</button>
        <!-- {{ playerContral[gameContral.player_id].address }} -->
      </div>
    </div>
    <!-- 弹出框-游戏开始 gameStart-->
    <van-popup
      v-model="gameStartSetting.game_start"
      :close-on-click-overlay="false"
      :style="{ height: '70%', width: '50%' }"
      round
    >
      <div class="pop-box">
        <div class="title">游玩人数</div>
        <van-radio-group
          v-model="gameStartSetting.player_num"
          direction="horizontal"
          icon-size="16"
          checked-color="#4FC08D"
          :style="{ 'justify-content': 'space-around', margin: '40px 100px' }"
        >
          <van-radio name="2">2</van-radio>
          <van-radio name="3">3</van-radio>
          <van-radio name="4">4</van-radio>
        </van-radio-group>
      </div>
      <div class="pop-box">
        <div class="title">初始金钱</div>
        <van-radio-group
          v-model="gameStartSetting.start_money"
          direction="horizontal"
          icon-size="16"
          checked-color="#4FC08D"
          :style="{ 'justify-content': 'space-around', margin: '40px 100px' }"
        >
          <van-radio name="30000">30000</van-radio>
          <van-radio name="50000">50000</van-radio>
          <van-radio name="100000">100000</van-radio>
        </van-radio-group>
      </div>
      <!-- <div class="pop-box">
        <div class="title">初始计谋</div>
        <van-radio-group
          v-model="gameStartSetting.player_num"
          direction="horizontal"
          icon-size="16"
          checked-color="#4FC08D"
          :style="{ 'justify-content': 'space-around', margin: '40px 100px' }"
        >
          <van-radio name="0">基础</van-radio>
          <van-radio name="50000">全部</van-radio>
        </van-radio-group>
      </div>
      <div class="pop-box">
        <div class="title">初始指挥</div>
        <van-radio-group
          v-model="gameStartSetting.player_num"
          direction="horizontal"
          icon-size="16"
          checked-color="#4FC08D"
          :style="{ 'justify-content': 'space-around', margin: '40px 100px' }"
        >
          <van-radio name="0">基础</van-radio>
          <van-radio name="50000">全部</van-radio>
        </van-radio-group>
      </div> -->

      <!-- 初始武将 初始计谋 初始指挥 -->
      <div class="fileInput">
        <input type="file" id="file" />
      </div>
      <van-button
        type="primary"
        round
        :style="{ height: '40px', margin: '80px', 'min-width': '120px' }"
        :loading="loading"
        @click="gameStart"
        loading-text="加载中"
        loading-type="spinner"
        >开始游戏</van-button
      >
    </van-popup>
    <!-- 弹出框-卡牌 showcard -->
    <van-popup
      v-model="gameContral.showcard"
      :close-on-click-overlay="false"
      :style="{ height: '90%', width: '90%' }"
      round
    >
      <div class="showcard-box">
        <div class="navbar">
          <div style="margin-top: 14px">
            <!-- 展示分类筛选 -->
            <van-radio-group
              v-model="showcardShowDataType"
              direction="horizontal"
              @change="changeShow"
            >
              <van-radio name="general">武将</van-radio>
              <van-radio name="stratagem">计谋</van-radio>
              <van-radio name="command">指挥</van-radio>
              <van-radio name="land">城池</van-radio>
            </van-radio-group>
          </div>
          <!-- 次级分类筛选 -->
          <div style="margin-top: 14px">
            <van-radio-group
              v-model="showcardShowDataFilter"
              direction="horizontal"
              @change="changeShowFilter"
            >
              <!-- 筛选-武将 -->
              <van-radio
                v-show="showcardShowDataType == 'general'"
                name="general"
                >获得顺序</van-radio
              >
              <van-radio v-show="showcardShowDataType == 'general'" name="pow"
                >武力</van-radio
              >
              <van-radio v-show="showcardShowDataType == 'general'" name="int"
                >智力</van-radio
              >
              <van-radio
                v-show="showcardShowDataType == 'general'"
                name="salary_1"
                >费用 ↑</van-radio
              >
              <van-radio
                v-show="showcardShowDataType == 'general'"
                name="salary_2"
                >费用 ↓</van-radio
              >
              <!-- 筛选-计谋 -->
              <van-radio
                v-show="showcardShowDataType == 'stratagem'"
                name="stratagem"
                >费用 ↓</van-radio
              >
              <van-radio
                v-show="showcardShowDataType == 'stratagem'"
                name="cost_2"
                >费用 ↑</van-radio
              >
              <!-- 筛选-指挥 -->
              <van-radio
                v-show="showcardShowDataType == 'command'"
                name="command"
                >全部</van-radio
              >
              <van-radio
                v-show="showcardShowDataType == 'command'"
                name="qibing"
                >骑兵</van-radio
              >
              <van-radio
                v-show="showcardShowDataType == 'command'"
                name="bubing"
                >步兵</van-radio
              >
              <van-radio
                v-show="showcardShowDataType == 'command'"
                name="gongbing"
                >弓兵</van-radio
              >
              <van-radio
                v-show="showcardShowDataType == 'command'"
                name="gongcheng"
                >攻城</van-radio
              >
              <!-- 筛选-城池 -->

              <!-- 筛选-政策 -->
            </van-radio-group>
          </div>
          <van-button
            color="red"
            round
            style="float: right; margin-right: 100px"
            @click="closePop('showcard')"
            >关闭</van-button
          >
        </div>
        <div class="main">
          <!-- <div class="beside">侧边</div> -->
          <div class="content">
            <!-- <div class="search"></div> -->
            <div
              class="cards scale"
              :style="{ height: `${mapConfig.width / 4.5}px` }"
              v-for="(item, index) in showcardShowData"
              :key="index"
            >
              <!-- 武将 -->
              <generalCard
                v-show="showcardShowDataType == 'general'"
                :item="item"
                :index="index"
              ></generalCard>
              <!-- 计谋 -->
              <stratagemCard
                v-show="showcardShowDataType == 'stratagem'"
                :item="item"
                :index="index"
              ></stratagemCard>
              <!-- 指挥 -->
              <commandCard
                v-show="showcardShowDataType == 'command'"
                :item="item"
                :index="index"
              ></commandCard>
              <!-- 城池 -->
              <landCard
                v-show="showcardShowDataType == 'land'"
                :item="item"
                :index="index"
              ></landCard>
              <!-- 政策 -->
              <!-- <generalCard
                v-show="showcardShowDataType == 'politics'"
                :item="item"
                :index="index"
              ></generalCard> -->
              <div style="height: 200px"></div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 弹出框-政策 showpolitics-->
    <van-popup
      v-model="gameContral.showpolitics"
      :close-on-click-overlay="false"
      :style="{ height: '90%', width: '90%' }"
      round
    >
      <div class="showcard-box">
        <div class="navbar">
          <div style="margin-top: 14px"></div>
          <!-- 次级分类筛选 -->
          <div style="margin-top: 14px"></div>
          <van-button
            color="red"
            round
            style="float: right; margin-right: 100px"
            @click="closePop('showpolitics')"
            >关闭</van-button
          >
        </div>
        <div class="main">
          <!-- <div class="beside">侧边</div> -->
          <!-- 政策面板 -->
          <div class="content">
            <!-- 主帅 -->
            <div
              class="cards scale"
              :style="{ height: `${mapConfig.width / 4.5}px` }"
              v-for="(item, index) in getCurrentPlayerInfo('chief')"
              :key="index"
            >
              <chiefCard :item="item" :index="index"></chiefCard>
            </div>
            <div
              class="cards scale"
              :style="{ height: `${mapConfig.width / 4.5}px` }"
              v-show="
                !getCurrentPlayerInfo('chief') ||
                getCurrentPlayerInfo('chief').length == 0
              "
            >
              <addCard type="chief" @addCard="addACard"></addCard>
            </div>

            <!-- 军师 -->
            <div
              class="cards scale"
              :style="{ height: `${mapConfig.width / 4.5}px` }"
              v-for="(item, index) in getCurrentPlayerInfo('counsellor')"
              :key="index"
            >
              <counsellorCard :item="item" :index="index"></counsellorCard>
            </div>
            <div
              class="cards scale"
              :style="{
                height: `${mapConfig.width / 4.5}px`,
              }"
              v-show="
                !getCurrentPlayerInfo('counsellor') ||
                getCurrentPlayerInfo('counsellor').length == 0
              "
            >
              <addCard type="counsellor" @addCard="addACard"></addCard>
            </div>
            <div
              class="cards scale"
              :style="{ height: `${mapConfig.width / 4.5}px` }"
            >
              <banCard></banCard>
            </div>
            <div
              class="cards scale"
              :style="{ height: `${mapConfig.width / 4.5}px` }"
            >
              <banCard></banCard>
            </div>
            <div
              class="cards scale"
              :style="{ height: `${mapConfig.width / 4.5}px` }"
            >
              <banCard></banCard>
            </div>
            <!-- 政策 -->
            <div
              class="cards scale"
              :style="{ height: `${mapConfig.width / 4.5}px` }"
              v-for="(item, index) in getCurrentPlayerInfo('politics')"
              :key="index"
            >
              <politicsCard :item="item" :index="index"></politicsCard>
            </div>
            <div
              class="cards scale"
              :style="{ height: `${mapConfig.width / 4.5}px` }"
              v-for="(n, index) in getpoliticsNum()"
              :key="index"
            >
              <addCard type="politics" @addCard="addACard"></addCard>
              <div style="height: 200px"></div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 弹出框-政策设置showcardSetting -->
    <van-popup
      v-model="gameContral.showcardSetting"
      :close-on-click-overlay="false"
      :style="{ height: '90%', width: '90%' }"
      round
    >
      <div class="showcard-box">
        <div class="navbar">
          <div style="margin-top: 14px">弹出框-政策设置showcardSetting</div>
          <!-- 次级分类筛选 -->
          <div style="margin-top: 14px">
            <van-radio-group
              v-model="showcardShowDataFilter"
              direction="horizontal"
              @change="changeShowFilter"
            >
              <!-- 筛选-武将 -->
              <van-radio name="orderby">获得顺序</van-radio>
              <van-radio name="pow">武力</van-radio>
              <van-radio name="int">智力</van-radio>
              <van-radio name="salary_1">费用 ↑</van-radio>
              <van-radio name="salary_2">费用 ↓</van-radio>
            </van-radio-group>
          </div>
          <van-button
            color="red"
            round
            style="float: right; margin-right: 100px"
            @click="closePop('showcardSetting')"
            >关闭</van-button
          >
        </div>
        <div class="main">
          <!-- <div class="beside">侧边</div> -->
          <div class="content">
            <!-- <div class="search"></div> -->
            <div
              class="cards"
              :style="{ height: `${mapConfig.width / 4.5}px` }"
              v-for="(item, index) in showcardShowData"
              :key="index"
            >
              <!-- 武将 -->
              <setCard
                v-show="showcardShowDataType == 'general'"
                :item="item"
                :index="index"
              ></setCard>

              <div style="height: 200px"></div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
// import {
//   tagList,
//   general,
//   tactic,
//   stratagem,
//   politics,
//   land,
//   mainControl,
//   playerContral,
// } from "@/utils/param";

//方法引入
import {
  nextPlayer,
  getCurrentPlayerInfo,
  turnStart,
  addLog,
  closePop,
  updateLand,
  checkMoney,
  buyLand,
  getLocalInfoById,
  getGeneralToPlayer,
  getLand,
  ifTerritory,
  getPolitics,
} from "@/api/monpoly.js";
import {
  queryGeneralByPlayerId,
  queryGeneralDetail,
  getmap,
  newGame,
} from "@/api/axios.js";
//组件引入
import Vue from "vue";
import store from "@/store";
import { Dialog } from "vant";
Vue.use(Dialog);
import generalCard from "./components/generalCard.vue";
import stratagemCard from "./components/stratagemCard.vue";
import commandCard from "./components/commandCard.vue";
import landCard from "./components/landCard.vue";
import chiefCard from "./components/chiefCard.vue";
import counsellorCard from "./components/counsellorCard.vue";
import politicsCard from "./components/politicsCard.vue";
import addCard from "./components/addCard.vue";
import banCard from "./components/banCard.vue";
import setCard from "./components/setCard.vue";
export default {
  components: {
    generalCard,
    stratagemCard,
    commandCard,
    landCard,
    chiefCard,
    counsellorCard,
    politicsCard,
    addCard,
    banCard,
    setCard,
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
    /**
     * 资源加载
     * 1地图绘制信息
     * 2玩家数据
     * 3领地数据
     * 4领地方法
     * 5领地数据
     * 6武将数据
     * 7战法数据
     * 8计谋数据
     * 9政策数据
     */
    this.init();
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
    //excel方法
    const oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = "https://unpkg.com/xlsx@0.13.3/dist/xlsx.full.min.js";
    document.body.appendChild(oScript);
    this.uploadExcel();
  },
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("destroyed");
  },
  data() {
    return {
      mapConfig: {
        size: 0, // 地图边
        width: 0,
        height: 0,
        cube: 0, //格子
      },
      //地图绘制基本数据
      mapList: [],
      //地图方法 停留 经过
      mapFunctionList: [
        {
          pass: function (value) {
            console.log(value, "pass0");
            // if (ifTerritory(0)) {
            //   let gameContral = JSON.parse(
            //     JSON.stringify(store.getters.gameContral)
            //   );
            //   gameContral.moving = false;
            //   store.commit("SET_gameContral", gameContral);
            //   getPolitics().then(() => {
            //     nextPlayer();
            //   });
            // }
          },
          stop: function (value) {
            console.log(value, "stop0");
            nextPlayer();
          },
          index: 0,
        },
        {
          pass: function (value) {
            console.log(value, "pass1");
          },
          stop: function (value) {
            console.log(value, "stop1");

            nextPlayer();
          },
          index: 1,
        },
        {
          pass: function (value) {
            console.log(value, "pass02");
            // if (ifTerritory(0)) {
            //   let gameContral = JSON.parse(
            //     JSON.stringify(store.getters.gameContral)
            //   );
            //   gameContral.moving = false;
            //   store.commit("SET_gameContral", gameContral);
            //   getPolitics().then(() => {
            //     nextPlayer();
            //   });
            // }
          },
          stop: function (value) {},
          index: 2,
        },
        {
          pass: function (value) {
            console.log(value, "pass03");
          },
          stop: function (value) {
            console.log(value, "stop03");
            if (checkMoney(0)) {
              Dialog.confirm({
                title: "提示",
                message: "购买",
              })
                .then(() => {
                  buyLand(3);
                  nextPlayer();
                })
                .catch(() => {});
            } else {
              Dialog.alert({
                title: "提示",
                message: "钱不够",
              }).then(() => {
                nextPlayer();
              });
            }
          },
          index: 3,
        },
        {
          pass: function (value) {
            console.log(value, "pass04");
          },
          stop: function (value) {
            console.log(value, "stop04");
            if (checkMoney(50000)) {
            } else {
              Dialog.alert({
                title: "提示",
                message: "钱不够",
              }).then(() => {
                nextPlayer();
              });
            }
          },
          index: 4,
        },
        {
          pass: function (value) {
            console.log(value, "pass05");
          },
          stop: function (value) {
            console.log(value, "stop05");
            nextPlayer();
          },
          index: 5,
        },
        {
          pass: function (value) {
            console.log(value, "pass06");
          },
          stop: function (value) {
            console.log(value, "stop06");
            nextPlayer();
          },
          index: 6,
        },
        {
          pass: function (value) {
            console.log(value, "pass07");
          },
          stop: function (value) {
            console.log(value, "stop07");
            nextPlayer();
          },
          index: 7,
        },
        {
          pass: function (value) {
            console.log(value, "pass08");
          },
          stop: function (value) {
            console.log(value, "stop08");
            nextPlayer();
          },
          index: 8,
        },
        {
          pass: function (value) {
            console.log(value, "pass09");
          },
          stop: function (value) {
            console.log(value, "stop09");
            nextPlayer();
          },
          index: 9,
        },
        {
          pass: function (value) {
            console.log(value, "pass10");
          },
          stop: function (value) {
            console.log(value, "stop10");
            nextPlayer();
          },
          index: 10,
        },
        {
          pass: function (value) {
            console.log(value, "pass11");
          },
          stop: function (value) {
            console.log(value, "stop11");
            nextPlayer();
          },
          index: 11,
        },
        {
          pass: function (value) {
            console.log(value, "pass12");
          },
          stop: function (value) {
            console.log(value, "stop12");
            nextPlayer();
          },
          index: 12,
        },
        {
          pass: function (value) {
            console.log(value, "pass13");
          },
          stop: function (value) {
            console.log(value, "stop13");
            nextPlayer();
          },
          index: 13,
        },
        {
          pass: function (value) {
            console.log(value, "pass14");
          },
          stop: function (value) {
            console.log(value, "stop14");
            nextPlayer();
          },
          index: 14,
        },
        {
          pass: function (value) {
            console.log(value, "pass15");
          },
          stop: function (value) {
            console.log(value, "stop15");
            nextPlayer();
          },
          index: 15,
        },
        {
          pass: function (value) {
            console.log(value, "pass16");
          },
          stop: function (value) {
            console.log(value, "stop16");
            nextPlayer();
          },
          index: 16,
        },
        {
          pass: function (value) {
            console.log(value, "pass17");
          },
          stop: function (value) {
            console.log(value, "stop17");
            nextPlayer();
          },
          index: 17,
        },
        {
          pass: function (value) {
            console.log(value, "pass18");
          },
          stop: function (value) {
            console.log(value, "stop18");
            nextPlayer();
          },
          index: 18,
        },
        {
          pass: function (value) {
            console.log(value, "pass19");
          },
          stop: function (value) {
            console.log(value, "stop19");
            nextPlayer();
          },
          index: 19,
        },
        {
          pass: function (value) {
            console.log(value, "pass20");
          },
          stop: function (value) {
            console.log(value, "stop20");
            nextPlayer();
          },
          index: 20,
        },
        {
          pass: function (value) {
            console.log(value, "pass21");
          },
          stop: function (value) {
            console.log(value, "stop21");
            nextPlayer();
          },
          index: 21,
        },
        {
          pass: function (value) {
            console.log(value, "pass22");
          },
          stop: function (value) {
            console.log(value, "stop22");
            nextPlayer();
          },
          index: 22,
        },
        {
          pass: function (value) {
            console.log(value, "pass23");
          },
          stop: function (value) {
            console.log(value, "stop23");
            nextPlayer();
          },
          index: 23,
        },
        {
          pass: function (value) {
            console.log(value, "pass24");
          },
          stop: function (value) {
            console.log(value, "stop24");
            nextPlayer();
          },
          index: 24,
        },
        {
          pass: function (value) {
            console.log(value, "pass25");
          },
          stop: function (value) {
            console.log(value, "stop25");
            nextPlayer();
          },
          index: 25,
        },
        {
          pass: function (value) {
            console.log(value, "pass26");
          },
          stop: function (value) {
            console.log(value, "stop26");
            nextPlayer();
          },
          index: 26,
        },
        {
          pass: function (value) {
            console.log(value, "pass27");
          },
          stop: function (value) {
            console.log(value, "stop27");
            nextPlayer();
          },
          index: 27,
        },
        {
          pass: function (value) {
            console.log(value, "pass28");
          },
          stop: function (value) {
            console.log(value, "stop28");
            nextPlayer();
          },
          index: 28,
        },
        {
          pass: function (value) {
            console.log(value, "pass29");
          },
          stop: function (value) {
            console.log(value, "stop29");
            nextPlayer();
          },
          index: 29,
        },
        {
          pass: function (value) {
            console.log(value, "pass30");
          },
          stop: function (value) {
            console.log(value, "stop30");
            nextPlayer();
          },
          index: 30,
        },
        {
          pass: function (value) {
            console.log(value, "pass31");
          },
          stop: function (value) {
            console.log(value, "stop31");
            nextPlayer();
          },
          index: 31,
        },
        {
          pass: function (value) {
            console.log(value, "pass32");
          },
          stop: function (value) {
            console.log(value, "stop32");
            nextPlayer();
          },
          index: 32,
        },
        {
          pass: function (value) {
            console.log(value, "pass33");
          },
          stop: function (value) {
            console.log(value, "stop33");
            nextPlayer();
          },
          index: 33,
        },
        {
          pass: function (value) {
            console.log(value, "pass34");
          },
          stop: function (value) {
            console.log(value, "stop34");
            nextPlayer();
          },
          index: 34,
        },
        {
          pass: function (value) {
            console.log(value, "pass35");
          },
          stop: function (value) {
            console.log(value, "stop35");
            nextPlayer();
          },
          index: 35,
        },
      ],
      /**
       * ---通用---
       * 编号 id
       * 编号 land_id
       * 名称 name
       * 图片 image
       * 类型 type
       * ---城池相关---
       * 价格 price
       * 城池等级 level
       * 过路费 upgradation 数组
       * 升级价格 upgradeCost
       * 税收 tax []
       * 标签 tag
       * 城防 def []
       * 持有者id holder
       * 驻守武将 defend []
       * id
       * land_id
       * land_name
       * land_type
       * land_image
       * player_id
       * land_price
       * land_level
       * business
       * population
       * build	toll
       * income
       * recruit
       * def
       * parameter
       * general_id_0
       * general_id_1
       * land_tag
       */
      mapDataList: [
        {
          id: 0,
          land_id: 0,
          land_name: "洛阳",
          land_image: "icon-capital",
          type: "capital",
          price: 10000,
          level: 0,
          upgradation: [10000],
          tax: [5000],
          tag: "",
          def: [6],
          holder: 4,
          defend: [],
        },
        {
          land_name: "集市",
          land_image: "icon-money",
          type: "shop",
          id: 1,
        },
        {
          id: 2,
          land_id: 2,
          land_name: "濮阳",
          land_image: "icon-city",
          type: "city",
          price: 6000,
          level: 0,
          upgradation: [2000],
          tax: [5000],
          tag: "",
          def: [6],
          holder: 4,
          defend: [],
        },
        {
          land_name: "襄阳",
          land_image: "icon-city",
          type: "bigcity",
          land_id: 3,
          id: 3,
          price: 6000,
          level: 0,
          upgradation: [2000, 6000, 18000, 54000, 162000],
          tax: [2000, 6000, 18000, 54000, 162000],
          def: [6, 7, 8, 9, 10],
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "新野",
          land_image: "icon-city",
          type: 0,
          id: 4,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "许昌",
          land_image: "icon-city",
          type: 1,
          id: 5,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "求贤",
          land_image: "icon-friends",
          type: 0,
          id: 6,
        },
        {
          land_name: "战场-官渡",
          land_image: "icon-city",
          type: 0,
          id: 7,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "剑门关",
          land_image: "icon-wall",
          type: "wall",
          id: 8,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },

        //-------------------------------------------
        {
          land_name: "成都",
          id: 9,
          land_image: "icon-capital",
          type: "capital",
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "集市",
          land_image: "icon-money",
          type: 0,
          id: 10,
        },
        {
          land_name: "长沙",
          land_image: "icon-city",
          type: 1,
          id: 11,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "西凉",
          land_image: "icon-city",
          type: 0,
          id: 12,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "江夏",
          land_image: "icon-city",
          type: 0,
          id: 13,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "汉中",
          land_image: "icon-city",
          type: 1,
          id: 14,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "求贤",
          land_image: "icon-friends",
          type: 0,
          id: 15,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          chief: null,
          counsellor: null,
        },
        {
          land_name: "战场-夷陵",
          land_image: "icon-city",
          type: 0,
          id: 16,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "濡须口",
          land_image: "icon-wall",
          type: 1,
          id: 17,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        //--------------------------
        {
          land_name: "建业",
          id: 18,
          land_image: "icon-capital",
          type: "capital",
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "集市",
          land_image: "icon-money",
          type: 0,
          id: 19,
        },
        {
          land_name: "江陵",
          land_image: "icon-city",
          type: 1,
          id: 20,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "寿春",
          land_image: "icon-city",
          type: 0,
          id: 21,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "下邳",
          land_image: "icon-city",
          type: 0,
          id: 22,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "柴桑",
          land_image: "icon-city",
          type: 1,
          id: 23,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "求贤",
          land_image: "icon-friends",
          type: 0,
          id: 24,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          chief: null,
          counsellor: null,
        },
        {
          land_name: "战场-赤壁",
          land_image: "icon-city",
          type: 0,
          id: 25,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "潼关",
          land_image: "icon-wall",
          type: "wall",
          id: 26,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        //-------------------
        {
          land_name: "长安",
          id: 27,
          land_image: "icon-capital",
          type: "capital",
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "集市",
          land_image: "icon-money",
          type: 0,
          id: 28,
        },
        {
          land_name: "邺城",
          land_image: "icon-city",
          type: 1,
          id: 29,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "南皮",
          land_image: "icon-city",
          type: 0,
          id: 30,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "平原",
          land_image: "icon-city",
          type: 0,
          id: 31,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "北平",
          land_image: "icon-city",
          type: 1,
          id: 32,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "求贤",
          land_image: "icon-friends",
          type: 0,
          id: 33,
        },
        {
          land_name: "战场-合肥",
          land_image: "icon-city",
          type: 0,
          id: 34,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
        {
          land_name: "虎牢关",
          land_image: "icon-wall",
          type: "wall",
          id: 35,
          price: 10000,
          level: 0,
          upgradation: [10000],

          tax: [5000],
          def: 6,
          tag: "",
          holder: 4,
          chief: null,
          counsellor: null,
        },
      ],
      //-------------参数---------------------
      child: {
        id: 999,
        name: "稻草人",
        pow: 1,
        int: 1,
        salary: 9999,
        type: "normal",
        tactic_name: "恐惧",
        stratagem_name: "夜割",
        politics_name: "群鸦风暴",
        image: "icon-child",
        tactic_desc:
          "被动：在非战斗状态下且未被敌人看到时，如果用一个技能对敌人造成了伤害，那么会使该敌人恐惧1/1.25/1.5/1.75/2秒。主动：恐惧一个目标1/1.25/1.5/1.75/2秒并造成相当于目标6/7/8/9/10%（+1%每50法强）当前生命值（最小值：40/60/80/100/120）的魔法伤害。如果目标近期被恐惧过，那么则会转而造成相当于目标12/14/16/18/20%（+2%每50法强）当前生命值（最小值：80/120/160/200/240）的魔法伤害。对野怪的最大伤害值为400。如果费德提克在冒充成【草间人】（原地站立2秒）期间施放技能，将会恐惧敌人。",
        stratagem_desc:
          "释放黑魔法至目标位置，在一个新月形区域内造成70/105/140/175/210（+0.5AP）魔法伤害和持续1.25秒的30/35/40/45/50%减速效果。新月中央的敌人们在减速期间还会被沉默。",
        politics_desc:
          "引导1.5秒，然后闪烁到目标地点，同时释放出成群的杀人鸦，每秒对范围内的所有敌方单位造成125/225/325（+0.45AP）魔法伤害。此效果持续5秒，最多造成625/1125/1625（+2.25AP）总魔法伤害。",
      },
      showHover: null,
      loading: false,
      value: 1,
      showcardShowDataType: "general", // 卡牌展示筛选
      showcardShowDataFilter: "orderby", // 次级筛选
      showcardShowData: [], // 卡牌展示数据
      //---------------------------------------
      gameStartSetting: {
        game_start: true,
        player_num: "2",
        start_money: "30000",
      },
      colorList: ["#67C23A", "#E6A23C", "#F56C6C", "#909399"],

      generalList: [],
      stratagemList: [],
      commandList: [],
      cardsList: [],
    };
  },
  watch: {},
  computed: {
    gameContral() {
      let res = JSON.parse(JSON.stringify(this.$store.getters.gameContral));
      console.log("gameContral", res);
      return res;
    },
    playerContral() {
      let res = JSON.parse(JSON.stringify(this.$store.getters.playerContral));
      return res;
    },
    historyInfo() {
      let res = JSON.parse(JSON.stringify(this.$store.getters.historyInfo));
      return res;
    },
  },
  methods: {
    // 流程方法--------------------------------
    testget() {
      queryGeneralByPlayerId(1).then((res) => {
        console.log(res, "promise");
      });
    },
    createMap(land) {
      this.mapConfig.size = window.innerHeight - 80;
      this.mapConfig.width = window.innerWidth;
      this.mapConfig.height = window.innerHeight;
      this.mapConfig.cube = (window.innerHeight - 80) / 10;
      // 绘制地棋盘
      for (var i = 0; i < land.length; i++) {
        const currentMapDataList = land;
        const currentMapFunctionList = this.mapFunctionList;
        if (i < 9) {
          let { land_name, land_image, land_type } = currentMapDataList[i];
          let { pass, stop } = currentMapFunctionList[i];
          this.mapList.push({
            land_id: i,
            size: this.mapConfig.cube,
            top: 0,
            left: this.mapConfig.cube * i,
            land_name,
            land_image,
            land_type,
            pass,
            stop,
          });
        } else if (i < 19) {
          let { land_name, land_image, land_type } = currentMapDataList[i];
          let { pass, stop } = currentMapFunctionList[i];
          this.mapList.push({
            land_id: i,
            size: this.mapConfig.cube,
            top: this.mapConfig.cube * (i - 9),
            left: this.mapConfig.cube * 9,
            land_name,
            land_image,
            land_type,
            pass,
            stop,
          });
        } else if (i < 28) {
          let { land_name, land_image, land_type } = currentMapDataList[i];
          let { pass } = currentMapFunctionList[i];
          this.mapList.push({
            land_id: i,
            size: this.mapConfig.cube,
            top: this.mapConfig.cube * 9,
            left: this.mapConfig.cube * (27 - i),
            land_name,
            land_image,
            land_type,
            pass,
            stop,
          });
        } else {
          let { land_name, land_image, land_type } = currentMapDataList[i];
          let { pass, stop } = currentMapFunctionList[i];
          this.mapList.push({
            land_id: i,
            size: this.mapConfig.cube,
            top: this.mapConfig.cube * (36 - i),
            left: 0,
            land_name,
            land_image,
            land_type,
            pass,
            stop,
          });
        }
      }
      //格子悬浮展示
      for (var i = 0; i < 36; i++) {
        if (i < 14) {
          this.mapList[i].hoverStyle = {
            top: `${this.mapConfig.cube * 0.8}px`,
            width: `${this.mapConfig.cube * 4}px`,
            height: `${this.mapConfig.cube * 4}px`,
            left: `${this.mapConfig.cube * 0.8}px`,
          };
        } else if (i < 32) {
          this.mapList[i].hoverStyle = {
            top: `-${this.mapConfig.cube * 3.8}px`,
            left: `${this.mapConfig.cube * 0.8}px`,
            width: `${this.mapConfig.cube * 4}px`,
            height: `${this.mapConfig.cube * 4}px`,
          };
        } else {
          this.mapList[i].hoverStyle = {
            top: `${this.mapConfig.cube * 0.8}px`,
            width: `${this.mapConfig.cube * 4}px`,
            height: `${this.mapConfig.cube * 4}px`,
            left: `${this.mapConfig.cube * 0.8}px`,
          };
        }
      }
    },
    /**
     * 初始化设置
     * 地图
     * 图片资源(暂时不做)
     *
     */
    init() {
      // 设置画布
      this.createMap(this.mapDataList);
      /**
       * 玩家数据
       * name 姓名
       * avatar 头像
       * money 资产
       * general 武将
       * land 城池
       * stratagem 计谋
       * command 指挥
       * address 地点
       * politics 政治-chief 主帅/counsellor 军师/politics 政策
       * capital 首都-0洛阳/9成都/18建业/27长安
       */
      let gameContral = {
        player_num: this.gameStartSetting.player_num,
        player_id: 0,
        turn: 1,
        setting: false,
        showcard: false,
        showpolitics: false,
        showcardSetting: false,
      };
      this.$store.commit("SET_gameContral", gameContral);
    },
    /**游戏开始(点击开始按钮)
     * 0创建对局编号
     * 1确定人数/初始金钱
     * 2创建全局全局参数
     * 3创建全局玩家参数
     * */
    gameStart() {
      let { player_num, start_money } = this.gameStartSetting;
      newGame({ player_num, start_money }).then((res) => {
        console.log(res, " this.gameStartSetting.player_num");
      });

      this.gameStartSetting.game_start = false;
    },
    gameStartold() {
      if (localStorage.getItem("fileDataList")) {
        if (this.loading) return;
        this.loading = true;
        // 设定全局参数初始值
        let gameContral = {
          player_num: this.gameStartSetting.player_num,
          player_id: 0,
          turn: 1,
          setting: false,
          showcard: false,
          showpolitics: false,
          showcardSetting: false,
        };

        //文件导入数据
        /**
         * tagList 字典
         * gameContral 游戏参数
         * general 武将
         * stratagem 计谋
         * politics 政策
         * command 指挥
         * tactic 战法
         * land 城池
         * map 地图 = 城池
         * mainControl 当前回合数据
         * playerContral 玩家数据
         * historyInfo 历史数据
         */
        let {
          tagList,
          general,
          stratagem,
          politics,
          command,
          tactic,
          land,
          playerContral,
        } = JSON.parse(localStorage.getItem("fileDataList"));
        playerContral.forEach((item) => {
          item.general = [];
          item.land = [];
          item.stratagem = [];
          item.command = [];
          item.chief = [];
          item.counsellor = [];
          item.politics = [];
        });

        this.$store.commit("SET_gameContral", gameContral);
        this.$store.commit("SET_general", general);
        this.$store.commit("SET_politics", politics);
        this.$store.commit("SET_stratagem", stratagem);
        this.$store.commit("SET_command", command);
        this.$store.commit("SET_tactic", tactic);
        // this.$store.commit("SET_land", this.mapDataList);
        // this.$store.commit("SET_map", this.mapDataList);
        this.$store.commit("SET_playerContral", playerContral);
        this.$store.commit("SET_land", land);
        this.$store.commit("SET_map", land);
        this.$store.commit("SET_historyInfo", []);
        this.$store.commit("SET_tagList", tagList[0]);

        // let lsdata = JSON.parse(localStorage.getItem("fileDataList"));
        // lsdata.land = this.mapDataList;
        // localStorage.setItem("fileDataList", JSON.stringify(lsdata));

        // 设定人员参数初始值
        let newplayerContral = [];

        newplayerContral = playerContral.slice(
          0,
          this.gameStartSetting.player_num
        );

        this.$store.commit("SET_playerContral", newplayerContral);

        addLog("游戏开始", 1);

        // this.$store.commit("SET_mainControl", this.mainControl);

        //设置初始领地和城池

        // 玩家设置 2人游戏对位开局
        let nowplayerContral1 = JSON.parse(
          JSON.stringify(this.$store.getters.playerContral)
        );
        if (gameContral.player_num == 2) {
          nowplayerContral1[1].address = 18;
        }
        this.$store.commit("SET_playerContral", nowplayerContral1);

        /**
         * 初始资源
         * 首都
         * 钱
         * 武将卡
         * 基础计谋卡/5 stratagemList
         * 基础指挥卡/3 commandList
         * */
        let nowplayerContral2 = JSON.parse(
          JSON.stringify(this.$store.getters.playerContral)
        );
        nowplayerContral2.forEach((item, index) => {
          item.money = this.gameStartSetting.start_money;
          item.capital = item.address;
          item.land.push(item.address);
          // getLand(item.id, item.address);
          // 初始计谋
          item.stratagem = stratagem
            .filter((item) => {
              return item.lv == "0";
            })
            .map((ele) => {
              return ele.id;
            });
          // 初始指挥
          item.command = command
            .filter((item) => {
              return item.lv == "0";
            })
            .map((ele) => {
              return ele.id;
            });
        });
        this.$store.commit("SET_playerContral", nowplayerContral2);

        let nowplayerContral3 = JSON.parse(
          JSON.stringify(this.$store.getters.playerContral)
        );
        nowplayerContral3.forEach((item, index) => {
          //抽取 10 名武将 // 初始抽不到5000的
          getGeneralToPlayer(item.id, 10, 0, 2);
        });

        // 游戏开始！

        this.loading = false;
        this.gameStartSetting.game_start = false;
        turnStart();
      } else {
        alert("请选择文件");
      }
    },
    getAddress(address) {
      return address % 36;
    },
    async handlerMove() {
      console.log(
        "移动开始,玩家id:",
        this.$store.getters.gameContral.player_id
      );
      if (this.loading) return;
      this.loading = true;

      let gameContral = JSON.parse(
        JSON.stringify(this.$store.getters.gameContral)
      );
      gameContral.moving = true;
      this.$store.commit("SET_gameContral", gameContral);
      let res = this.getRandomInt(1, 6);
      let step = 0;
      let add = 1;
      let speed = 10;
      let wait = () =>
        new Promise((resolve, reject) => {
          setTimeout(resolve, speed);
        });
      this.value = 0;
      do {
        await wait();
        if (this.value == 6) {
          add = -1;
        }
        if (this.value == 0) {
          add = 1;
        }
        this.value += add;
        step++;
        speed += (step * step) / 800;
      } while (this.value != Math.ceil(res) || step < 50);
      await this.moving(6);
    },
    /**
     * 移动
     * step 移动步数
     * speed 移动速度
     * */
    async moving(step, speed = 500) {
      //玩家xx掷到了xx，经过/停留
      let gameContral = JSON.parse(
        JSON.stringify(this.$store.getters.gameContral)
      );

      let playerContral = JSON.parse(
        JSON.stringify(this.$store.getters.playerContral)
      );
      gameContral.moving = true;
      this.$store.commit("SET_gameContral", gameContral);

      let turn = gameContral.turn;
      let str =
        "玩家【" +
        playerContral[gameContral.player_id].name +
        "】掷到了" +
        step;
      addLog(str, turn);

      let wait = () =>
        new Promise((resolve, reject) => {
          setTimeout(resolve, speed);
        });
      for (let i = 0; i < step; i++) {
        let moving = this.$store.getters.gameContral.moving;
        if (!moving) {
          console.log("夹断！");
          this.loading = false;
          return;
        }
        await wait();
        //移动
        playerContral[gameContral.player_id].address++;
        let newAddress = playerContral[gameContral.player_id].address % 36;

        this.$store.commit("SET_playerContral", playerContral);
        //触发事件
        console.log("触发事件", i, step, newAddress);
        if (i == step - 1 && this.mapFunctionList[newAddress].stop) {
          this.mapFunctionList[newAddress].stop(null);
        } else if (this.mapFunctionList[newAddress].pass) {
          this.mapFunctionList[newAddress].pass(null);
        }
      }
      setTimeout(() => {
        gameContral.moving = false;
        // this.$store.commit("SET_gameContral", gameContral);
        this.loading = false;
      }, 500);
    },
    getPlayerStyleByItem(item) {
      let address = this.getAddress(item.address);
      const mapxy = this.mapList[address];
      let cubeSize = this.mapConfig.cube / 2 - 10;
      let player_id = item.id;
      let color = this.colorList[item.id];
      //1 2 top+5
      //1 3 left+5
      //2 4 left +20
      let style = {
        background: color,
        top:
          mapxy.top +
          40 +
          cubeSize * (player_id > 1 ? 1 : 0) +
          5 * (player_id > 1 ? 2 : 1) +
          "px",
        left:
          mapxy.left +
          40 +
          cubeSize * (player_id % 2 ? 1 : 0) +
          5 * (player_id % 2 ? 2 : 1) +
          "px",
        width: cubeSize + "px",
        height: cubeSize + "px",
        "border-radius": cubeSize + "px",
        "line-height": cubeSize + "px",
      };
      return style;
    },
    centerStyle() {
      let size = this.mapConfig.size;
      let cube = this.mapConfig.cube;
      let style = {
        width: cube * 8 - 40 + "px",
        height: cube * 8 - 40 + "px",
        padding: cube + 20 + "px",
      };
      return style;
    },
    //数据导入
    uploadExcel() {
      var that = this;
      document.getElementById("file").addEventListener("change", function (e) {
        localStorage.removeItem("fileDataList");
        that.loading = true;

        var files = e.target.files;
        var name = [];
        name = files[0].name.split(".")[1];
        if (name != "xlsx") {
          alert("文件类型不正确，仅支持xlsx类型文件（全小写）");
          that.loading = false;
          return;
        }
        var fileReader = new FileReader(); // 将文件内容读入内存
        fileReader.onload = function (ev) {
          that.loading = true;
          // 当读取操作成功完成时调用
          // console.log("this.result", this.result); // 查看文件输出内容
          try {
            var data = ev.target.result,
              //以二进制流方式读取得到表格中数据
              workbook = XLSX.read(data, { type: "binary" }),
              info = []; //存储获取到的数据
          } catch (e) {
            alert("文件类型不正确");
            that.loading = false;
            return;
          }
          var fromTo = "";
          var fileDataList = {};
          //遍历每张表读取
          for (var sheet in workbook.Sheets) {
            var res = [];
            if (workbook.Sheets.hasOwnProperty(sheet)) {
              fromTo = workbook.Sheets[sheet]["!ref"];
              res = res.concat(
                XLSX.utils.sheet_to_json(workbook.Sheets[sheet])
              );
            }
            fileDataList[sheet] = res;
          }
          localStorage.setItem("fileDataList", JSON.stringify(fileDataList));
          that.loading = false;
        };
        //以二进制方式打开文件
        fileReader.readAsBinaryString(files[0]);
        that.$router.go(0);
      }),
        false;
    },

    //通用方法-------------------------------------------

    getpoliticsNum() {
      return getCurrentPlayerInfo("politicsNum");
    },
    closePop(key) {
      closePop(key);
    },
    nextPlayer() {
      nextPlayer();
    },
    getCurrentPlayerInfo(key) {
      getCurrentPlayerInfo(key);
    },
    //随机数
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    /**
     * 洗牌，每次洗1张
     * num 次数
     * array 目标数组
     */
    shuffle(array, num = 500) {
      let res = JSON.parse(JSON.stringify(array));
      let max = res.length;
      for (var x = 0; x < num; x++) {
        let i = Math.floor(Math.random() * max);
        let item = res.splice(i, 1);
        res.unshift(...item);
      }
      return res;
    },
    //玩家行动-----------------------------
    //点击查看
    showcardByType(item, type) {
      let gameContral = JSON.parse(
        JSON.stringify(this.$store.getters.gameContral)
      );
      let array = item[type];

      this.showcardShowData = getLocalInfoById(array, type);
      console.log("点击查看", "array", array, "type", this.showcardShowData);

      this.showcardShowDataType = type;

      this.showcardShowDataFilter = type;
      if (type == "politics") {
        gameContral.showpolitics = true;
      } else {
        gameContral.showcard = true;
      }
      this.$store.commit("SET_gameContral", gameContral);
    },
    changeShow(value) {
      console.log("城池吗？", value);
      let gameContral = JSON.parse(
        JSON.stringify(this.$store.getters.gameContral)
      );
      let playerContral = JSON.parse(
        JSON.stringify(this.$store.getters.playerContral)
      );
      let array = playerContral[gameContral.player_id][value];
      this.showcardShowData = getLocalInfoById(array, value);
    },
    changeShowFilter(value) {
      this.setOrderby();
    },
    setOrderby() {
      let gameContral = JSON.parse(
        JSON.stringify(this.$store.getters.gameContral)
      );
      let playerContral = JSON.parse(
        JSON.stringify(this.$store.getters.playerContral)
      );
      let queryArr = [];
      let array = [];
      let res = [];
      // this.showcardShowData =
      //   playerContral[gameContral.player_id][this.showcardShowDataType];

      switch (this.showcardShowDataFilter) {
        //武将 general
        case "general":
          queryArr = playerContral[gameContral.player_id]["general"];
          array = getLocalInfoById(queryArr, "general");
          res = array;
          break;
        case "pow":
          queryArr = playerContral[gameContral.player_id]["general"];
          array = getLocalInfoById(queryArr, "general");

          res = array.sort((a, b) => {
            return Number(b.pow) - Number(a.pow);
          });
          break;
        case "int":
          queryArr = playerContral[gameContral.player_id]["general"];
          array = getLocalInfoById(queryArr, "general");

          res = array.sort((a, b) => {
            return Number(b.int) - Number(a.int);
          });
          break;
        case "salary_1":
          queryArr = playerContral[gameContral.player_id]["general"];
          array = getLocalInfoById(queryArr, "general");

          res = array.sort((a, b) => {
            return Number(b.salary) - Number(a.salary);
          });
          break;
        case "salary_2":
          queryArr = playerContral[gameContral.player_id]["general"];
          array = getLocalInfoById(queryArr, "general");

          res = array.sort((a, b) => {
            return Number(a.salary) - Number(b.salary);
          });
          break;
        //计谋
        case "stratagem":
          queryArr = playerContral[gameContral.player_id]["stratagem"];
          array = getLocalInfoById(queryArr, "stratagem");

          res = array.sort((a, b) => {
            return Number(b.cost) - Number(a.cost);
          });
          break;
        case "cost_2":
          queryArr = playerContral[gameContral.player_id]["stratagem"];
          array = getLocalInfoById(queryArr, "stratagem");

          res = array.sort((a, b) => {
            return Number(a.cost) - Number(b.cost);
          });
          break;
        //指挥
        case "command":
          queryArr = playerContral[gameContral.player_id]["command"];
          array = getLocalInfoById(queryArr, "command");
          res = array;
          break;
        case "qibing":
          queryArr = playerContral[gameContral.player_id]["command"];
          array = getLocalInfoById(queryArr, "command");
          res = array.filter((item) => {
            return item.type == "qibing";
          });
          break;
        case "bubing":
          queryArr = playerContral[gameContral.player_id]["command"];
          array = getLocalInfoById(queryArr, "command");
          res = array.filter((item) => {
            return item.type == "bubing";
          });
          break;
        case "gongbing":
          queryArr = playerContral[gameContral.player_id]["command"];
          array = getLocalInfoById(queryArr, "command");
          res = array.filter((item) => {
            return item.type == "gongbing";
          });
          break;
        case "gongcheng":
          queryArr = playerContral[gameContral.player_id]["command"];
          array = getLocalInfoById(queryArr, "command");
          res = array.filter((item) => {
            return item.type == "gongcheng";
          });
          break;
        case "land":
          queryArr = playerContral[gameContral.player_id]["land"];
          array = getLocalInfoById(queryArr, "land");
          res = array;
          break;
      }
      this.showcardShowData = res;
    },
    addACard() {
      let gameContral = JSON.parse(
        JSON.stringify(this.$store.getters.gameContral)
      );
      let playerContral = JSON.parse(
        JSON.stringify(this.$store.getters.playerContral)
      );

      this.showcardShowDataType = "general";
      this.showcardShowData = playerContral[gameContral.player_id].general;
      gameContral.setting = true;
      gameContral.showcardSetting = true;
      this.$store.commit("SET_gameContral", gameContral);
    },
  },
};
</script>
<style scoped lang="less">
body {
  box-sizing: border-box;
}
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .camera {
    margin: 40px;
    z-index: 1;
    .map {
      position: relative;
      z-index: 1;

      //   margin: 20px;
      .map-cube {
        position: absolute;
        border: 0.5px solid #000;
        .map-hover {
          border: 0.5px solid #000;
          position: absolute;
          background-color: #fff;
          z-index: 9999;
        }
      }
    }
    .center-box {
      background-color: #f7ccd2;
      border: 1px solid #000;

      .center-inner-box {
        border: 1px solid #000;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        padding: 40px;
        overflow-y: scroll;
        word-break: break-all;

        .center-item {
          // margin: 0 auto;
          text-align: start;
        }
      }
      .center-inner-box::-webkit-scrollbar {
        display: none;
      }
    }
  }
  .ui-box {
    position: absolute;
    background-color: #f9eaea;
    border-radius: 20px;
    top: 20px;
    right: 20px;
    bottom: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    .player-box {
      display: flex;
      padding: 20px;
      .avatar-box {
        margin: 20px 0;
        width: 200px;
        height: 200px;
        overflow: hidden;
        border-radius: 10px;
        border: 4px solid #000;
        .avatar {
          width: 100%;
        }
      }
      .info-box {
        box-sizing: border-box;
        border: 1px solid #000;
        border-radius: 10px;
        min-width: 300px;
        margin: 10px 40px;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        align-items: center;
        .nb {
          border: none !important;
          box-shadow: none !important;
          height: 24px;
          width: calc(100% - 40px);
          margin: 10px;
          transform: skew(-20deg);
          transform-origin: bottom right;
          justify-content: space-around;
          display: flex;
          .info-item-item {
            box-sizing: border-box;
            text-align: center;
            border: 1px solid #000;
            height: 30px;
            display: inline-block;
            padding: 5px 20px;

            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 2px 2px #999,
              /* Top shadow */ 0 2px 2px rgba(0, 0, 0, 0.75),
              /* Bottom shadow */ 2px 2px rgba(0, 0, 0, 0.75); /* Inner shadow */
            text-align: center;
            transition: box-shadow 0.5s ease; /* Animation */
          }
          .info-item-item:hover {
            box-shadow: 0 3px 2px #999,
              /* Top shadow */ 0 5px 5px rgba(0, 0, 0, 0.75),
              /* Bottom shadow */ 2px 5px 5px rgba(0, 0, 0, 0.75); /* Inner shadow */
          }
          .color_1 {
            background-color: #4caf50;
            color: white;
          }
          .color_1:hover {
            background-color: red;
          }
          .color_2 {
            background-color: #e6a23c;
            color: white;
          }
          .color_2:hover {
            background-color: red;
          }
          .color_3 {
            background-color: #f56c6c;
            color: white;
          }
          .color_3:hover {
            background-color: red;
          }
          .color_4 {
            background-color: #409eff;
            color: white;
          }
          .color_4:hover {
            background-color: red;
          }
        }
        .info-item {
          height: 24px;
          width: calc(100% - 40px);
          margin: 10px;
          border: 1px solid #000;
          transform: skew(-20deg);
          transform-origin: bottom right;
          justify-content: space-around;
          display: flex;
          color: white;
          border-radius: 5px;
          background-color: #6eb0ee;
          box-shadow: 0 2px 2px #fc4242,
            /* Top shadow */ 0 2px 2px rgba(0, 0, 0, 0.75),
            /* Bottom shadow */ 2px 2px rgba(0, 0, 0, 0.75); /* Inner shadow */
          transition: box-shadow 0.5s ease; /* Animation */
        }
        .hvbtn {
          cursor: pointer;
          background-color: #2f4ae5;
        }
        .hvbtn:hover {
          background-color: red;
          box-shadow: 0 3px 2px #999,
            /* Top shadow */ 0 5px 5px rgba(0, 0, 0, 0.75),
            /* Bottom shadow */ 2px 5px 5px rgba(0, 0, 0, 0.75); /* Inner shadow */
        }
      }
    }
    .dice-box {
      // width: 200px;
      height: 60px;
      margin-bottom: 20px;
      display: flex;
      .step {
        height: 60px;
        line-height: 60px;
      }
    }
    .operate {
      border: 1px solid #000000;
      border-radius: 10px;
      flex: 1;
    }
  }
}
.cube-box {
  width: 100%;
  height: 100%;
  background-color: #bef0d3;
  .title {
    height: 40%;
  }
  .cube {
    font-size: 32px;
  }
  .content {
  }
}
.player-select {
  width: 400px;
  height: 300px;
  background-color: #cdd6c8;
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 10%;
}
.player {
  background: rgba(236, 249, 255, 0.8);
  // font-size: 14px;
  color: #ffffff;
  font-weight: bolder;
  padding: 2px;
  z-index: 99;
  position: absolute;
  border: 2px solid #ffffff;
}
.showcard-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .navbar {
    width: 100%;
    height: 50px;
    background: #e0e5ff;
    line-height: 50px;
    color: #fff;
    padding: 20px 0 20px 40px;
    display: flex;
    justify-content: space-between;
  }
  .main {
    width: 100%;
    background-color: #daffe0;
    flex: 1;
    display: flex;
    .beside {
      width: 20vh;
      background-color: #fa9393;
    }
    .content {
      overflow: scroll;
      height: calc(80vh - 80px);
      width: 100%;
      padding: 60px;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 30px;
      // grid-template-rows: repeat(auto-fill, minmax(260px, 1fr));
      .cards {
        position: relative;
        .top {
          height: 15%;
          border: 2px solid #000000;
          border-top-right-radius: 6px;
          border-top-left-radius: 6px;
          display: flex;
          justify-content: space-between;
          .name {
            flex: 1;
          }
          .cost {
            display: inline-block;
            border-left: 2px solid #000000;
            align-self: center;
            min-width: 60px;
          }
        }
        .mid {
          height: 35%;
          border: 2px solid #000000;
          text-align: start;
          padding: 0 10px;
        }
        .bottom {
          text-align: start;
          height: calc(50% - 10px);
          border: 2px solid #000000;
          padding: 0 10px;
          border-bottom-left-radius: 6px;
          border-bottom-right-radius: 6px;

          font-size: 20px;
        }
        .map-hover {
          border: 2px solid #737373;
          position: absolute;
          background-color: #e9c1c1;
          z-index: 9999;
          width: 100%;
          height: 40%;
          top: 70%;
          border-radius: 6px;
          text-align: start;
          padding: 10px;

          font-size: 20px;
        }
      }
      .scale:hover {
        z-index: 9999;
        transform: scale(1.2);
      }
    }
    .content::-webkit-scrollbar {
      display: none;
    }
  }
}
#file::file-selector-button {
  padding: 6px 10px;
  background-color: #1e9fff;
  border: 1px solid #1e9fff;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font-size: 12px;
}
#file {
  font-size: 0;
}
.pop-box {
  display: flex;
  height: 100px;
  padding: 0 40px;
  .title {
    height: 100px;
    line-height: 100px;
  }
}
</style>
